<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <button onclick="setNum(200)">{{num}}</button>
    <!--  1- 如果逻辑比较简单，比如一条语句，且不会被重复调用，建议使用JS语句  -->
    <button v-on:click="num++">{{num}}</button>
    <!--  2- 可以指定一个函数名. 逻辑较复杂且不需要传递参数时  -->
    <button v-on:click="setNum">{{num}}</button>
    <!--  3- 使用call改变不了this  -->
    <button v-on:click="setNum2.call({},2)">{{num}}</button>
    <button v-on:click="setNum2.bind()(3)">{{num}}</button>
    <!--  4- 如果需要传递参数直接调用即可  -->
    <button v-on:click="setNum2(4)">{{num}}</button>
    <!--  5- 直接指定函数，默认接收的第一个参数即是事件对象  -->
    <button v-on:click="setNum3">{{num}}</button>
    <!--  6- 如果直接调用  -->
    <button v-on:click="setNum4($event,10)">{{num}}</button>
    <!--  7- 注意：如果写的是JS语句，不支持内置的函数调用  -->
    <button v-on:click="alert('1')">{{num}}</button>
    <!--  8- v-on:简写@     -->
    <button @click="alert('1')">{{num}}</button>

</div>
</body>
<script>
    // vue是一个帮助程序员构建界面视图的渐进式的JAVASCRIPT框架
    // 数据驱动视图：当data中的数据发生改变，会将模板重新编译然后更新。
    // mvvm
	const vm = new Vue({
		el: "#root",
        data:{
			num:1000
        },
        methods:{
			setNum(){
				this.num = 900;
				// console.log(this)
            },
            setNum2(num){
				console.log(11111,this)
				this.num+=num;
            },
            setNum3(e,num){
				console.log(e.target.innerHTML);
				// this.num+=num;
            },
            setNum4(e,num){
				console.log(e,num);
				this.num+=10;
            },
            alert(num){
				alert(num);
            }
        }
	});
	const setNum = function(num){
		vm.num = num;
    }
</script>
</html>